<template>
  <section class="app-inner">
    <el-card class="header-card">
      <h2>编辑任务</h2>
      <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="500px" size="small">
        <el-form-item label="任务编号" prop="planCode">
          <span class="task-span">{{ editForm.planCode }}</span>
          <el-button v-if="editForm.isValid === 1" type="success" size="small" @click="changeValid">已启用</el-button>
          <el-button v-else type="warning" size="small" @click="changeValid">未启用</el-button>
        </el-form-item>

        <el-form-item label="任务类型" prop="planType">
          <el-select class="task-input" v-model="editForm.planType" placeholder="任务类型">
            <el-option v-for="item in planTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务名称" prop="planName">
          <el-input v-model="editForm.planName" class="task-input" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="巡检执行人" prop="taskOperatorUserName">
          <el-input
            v-model="editForm.taskOperatorUserName"
            class="task-input"
            :disabled="true"
            maxlength="32"
          ></el-input>
          <el-button type="primary" size="small" @click="handleChose">选择</el-button>
        </el-form-item>
        <el-form-item label="计划开启巡检时间">
          <el-form-item prop="planStartTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-model="editForm.planStartTime"
              class="task-input"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="生效时间范围">
          <el-time-select
            class="task-input"
            :editable="false"
            :clearable="false"
            placeholder="起始时间"
            v-model="editForm.validStartTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
              maxTime: editForm.validEndTime
            }"
          ></el-time-select>
          <el-time-select
            class="task-input"
            placeholder="结束时间"
            :editable="false"
            :clearable="false"
            v-model="editForm.validEndTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
              minTime: editForm.validStartTime
            }"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="周期设定" prop="planPeriodByFront">
          <el-checkbox-group v-model="editForm.planPeriodByFront">
            <el-row>
              <el-col :span="18">
                <el-checkbox v-for="(item, index) in weekList" :key="index" :label="index + 1">{{
                  item.label
                }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <h2>编辑巡更点</h2>
      <div v-for="(item, index) in spotArr" :key="index" class="position-tab">
        <div>
          <h3>{{ index + 1 }}</h3>
          <span>{{ item.spotName }}</span>
          <el-button v-if="editForm.planType == 2" icon="el-icon-plus" size="small" @click="addItems(item)"
            >添加巡查项</el-button
          >
          <el-button type="primary" size="small" @click="updatePosition(item)">更换巡更点</el-button>
        </div>
        <el-table v-if="editForm.planType == 2" border :data="item.planSpotEventRelationList" style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="taskContent" label="巡查内容"></el-table-column>
          <el-table-column prop="inputMode" label="输入模式" :formatter="inputFormatter"></el-table-column>
          <el-table-column prop="" label="是否必须反馈">是</el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="foot-card">
      <div class="btn-group">
        <el-button @click="handleCancel('editFormRef')" size="small">取消</el-button>
        <el-button type="success" @click="enableForm('editFormRef')" size="small">确定</el-button>
      </div>
    </el-card>
    <!-- 添加巡更点弹框 -->
    <el-dialog :title="eventControl" :visible.sync="dialogAddVisible" :before-close="closeAdd" width="800px" center>
      <div class="clear-box">
        <el-button type="danger" @click="handleClearAll" size="small">清空列表</el-button>
      </div>
      <el-card>
        <template v-for="item in checkedSpot">
          <el-tag :key="item.id" v-if="item.checked === true" closable @close="closeTag(item.id)">{{
            item.spotName
          }}</el-tag>
        </template>
      </el-card>
      <el-form ref="AddFormRef" :model="editForm" :rules="rules" :inline="true" size="small">
        <el-form-item>
          <el-input placeholder="请输入巡更点编号或名称" v-model="spotValue" clearable maxlength="32"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="spotSubmit">查询</el-button>
        </el-form-item>
        <el-table border :data="tableData">
          <el-table-column prop="spotCode" label="巡更点编号" width="200"></el-table-column>
          <el-table-column prop="spotName" label="巡更点名称"></el-table-column>
          <el-table-column label="巡更点类型" prop="spotType">
            <template slot-scope="scope">
              {{ getLabel(scope.row.spotType) }}
            </template>
          </el-table-column>
          <el-table-column label="是否有效" prop="spotEnable" width="100"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="handleAdd(scope.row)" :disabled="scope.row.disabled"
                >增加</el-checkbox
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          layout="total, prev, pager, next"
          @current-change="pageHandleChange"
          :current-page="currentPage"
          :total="totalPageNum"
        ></el-pagination>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAdd" size="small">取消</el-button>
        <el-button type="primary" @click="handleEditSpotEvent" size="small">确定</el-button>
      </span>
    </el-dialog>
    <!-- 添加巡查项 弹框 -->
    <el-dialog :title="eventControl" :visible.sync="dialogItemsVisible" :before-close="closeItems" center>
      <el-form ref="itemsFormRef" :model="ItemsForm" :rules="rules" size="small">
        <el-form-item label="巡查项内容" label-width="100px" prop="taskContent">
          <el-input v-model="ItemsForm.taskContent" auto-complete="off" placeholder="请输入" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="输入模式" label-width="100px" prop="inputMode">
          <el-select v-model="ItemsForm.inputMode" clearable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in inputList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈可选项" label-width="100px" prop="feedbackItemId">
          <el-input
            v-if="ItemsForm.inputMode === 0"
            placeholder="输入框模式"
            :disabled="true"
            maxlength="32"
          ></el-input>
          <el-select v-else v-model="ItemsForm.feedbackItemId" clearable placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in reChooseList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeItems" size="small">取消</el-button>
        <el-button type="primary" @click="handleItemsEvent('itemsFormRef')" size="small">确定</el-button>
      </span>
    </el-dialog>
    <!-- 表格编辑 弹框 -->
    <el-dialog :title="eventControl" :visible.sync="dialogEditVisible" center :before-close="closedEdit" class="handle">
      <el-form ref="ItemsFormRef" :model="ItemsForm" :rules="rules" size="small">
        <el-form-item label="巡查内容" label-width="120px" prop="taskContent">
          <el-input v-model="ItemsForm.taskContent" auto-complete="off" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="输入模式" label-width="120px" prop="inputMode">
          <el-select
            v-model="ItemsForm.inputMode"
            clearable
            placeholder="请选择"
            style="width: 100%"
            @change="modeChange"
          >
            <el-option v-for="item in inputList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈可选项" label-width="120px" prop="feedbackItemId">
          <el-input
            v-if="ItemsForm.inputMode === 0"
            placeholder="输入框模式"
            :disabled="true"
            maxlength="32"
          ></el-input>
          <el-select v-else v-model="ItemsForm.feedbackItemId" clearable placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in reChooseList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedEdit" size="small">取消</el-button>
        <el-button type="primary" @click="handleEditEvent('ItemsFormRef')" size="small">确定</el-button>
      </span>
    </el-dialog>
    <post-user-tree-modal
      ref="PostUserTreeModal"
      @userTreeModalOk="userTreeModalOk"
      :checkUserInfo="checkUserInfo"
    ></post-user-tree-modal>
  </section>
</template>

<script>
import { getSpotList, getPlanInfo, updatePlan, deletePlanRelation, addPlanRelation } from './js/patrol'
import { entryMode, reChoose, week, planTypeList, spotTypeList } from './js/constants'
import PostUserTreeModal from './components/PostUserTreeModal'

export default {
  name: 'Setting',
  components: { PostUserTreeModal },
  data () {
    return {
      spotArr: [],
      value: '',
      spotValue: '',
      tableData: [], // 巡更点数据
      ItemsData: [], // 巡查项数据
      eventControl: '',
      dialogAddVisible: false, // 添加巡更点
      dialogItemsVisible: false, // 添加巡查项
      dialogEditVisible: false, // 编辑
      inputList: entryMode,
      reChooseList: reChoose,
      weekList: week,
      planCodeId: '',
      spotCodeId: '',
      currentPage: 1,
      pageSize: 10,
      totalPageNum: 40,
      spotFlag: 0,
      itemFlag: 0,
      changeFlag: false,
      ItemsForm: {
        complete: true,
        feedbackItemId: '',
        feedback: '',
        planCode: '',
        spotCode: '',
        taskCode: '',
        taskContent: '',
        inputMode: ''
      },
      spotForm: {
        spotCode: '',
        spotName: ''
      },
      editForm: {
        planType: '',
        userId: [],
        checkedInspector: '',
        contentCode: '',
        spotCode: '',
        spotName: '',
        taskContent: '',
        taskCode: '',
        inputMode: '',
        feedbackItemId: '',
        validStartTime: '',
        validEndTime: '',
        needUploadImage: '',
        planPeriodByFront: [],
        taskOperatorUserName: ''
      },
      rules: {
        planType: [{ required: true, message: '请选择任务类型', trigger: 'blur' }],
        planName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        spot: [{ required: true, message: '请选择巡更点', trigger: 'blur' }],
        checkedInspector: [{ required: true, message: '请选择巡检人', trigger: 'blur' }],
        taskOperatorUserName: [{ required: true, message: '请选择巡检人', trigger: 'change' }],
        name: [{ required: true, message: '请选择巡检人', trigger: 'blur' }],
        taskContent: [{ required: true, message: '请输入巡查项内容', trigger: 'blur' }],
        inputMode: [{ required: true, message: '请选择输入模式', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择时间', trigger: 'change' }]
      },
      oldSpotCode: '',
      checkedSpot: [],
      checkedArray: [],
      InspectorList: '',
      InspectorValue: [],
      codeArr: [],
      positionList: [],
      positionValue: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      checkUserInfo: {},
      planTypeList
    }
  },
  created () {
    this.editForm = { ...this.editForm, ...JSON.parse(this.$route.query.row) }
    if (this.editForm.planCode) {
      window.localStorage.setItem('patrolSetting', JSON.stringify(this.editForm))
    } else {
      this.editForm = JSON.parse(window.localStorage.getItem('patrolSetting'))
    }
  },
  mounted () {
    this.getPlanInfoList()
  },
  methods: {
    inputFormatter (row, column, cellValue) {
      return this.$base.constFormatter(entryMode, cellValue)
    },
    reFormatter (row, column, cellValue) {
      return this.$base.constFormatter(reChoose, cellValue)
    },
    // 未启用
    changeValid () {
      if (this.editForm.isValid === 1) {
        this.editForm.isValid = 0
      } else {
        this.editForm.isValid = 1
      }
    },
    // 获取计划任务详情（包括巡更点和巡查项）
    async getPlanInfoList () {
      let res = await getPlanInfo(this.editForm.planCode)
      this.spotArr = res.data.planSpotEventList
      this.editForm.planType = res.data.planType

      const { taskOperatorUserName: userName, taskOperatorRoleNo, taskOperatorUserNo } = res.data
      this.checkUserInfo = { userName, userNo: `${taskOperatorRoleNo}-${taskOperatorUserNo}` }
    },
    // 获取巡更点列表
    async getPlanSpotList (spotData) {
      let params = {}
      if (spotData) {
        params = {
          ...spotData,
          pageSize: 10,
          pageNum: this.currentPage,
          spotEnable: 1
        }
      } else {
        params = {
          pageSize: 10,
          pageNum: this.currentPage,
          spotEnable: 1
        }
      }
      let res = await getSpotList(params)
      this.totalPageNum = res.data.total
      res = res.data.list
      let spotArray = []
      res.forEach(item => {
        if (item.spotEnable) {
          item.spotEnable = '是'
          spotArray.push({
            ...item,
            checked: false
          })
        }
      })
      if (this.checkedSpot.length > 1) {
        spotArray.forEach(item => {
          item.disabled = true
        })
      }
      this.tableData = spotArray
    },
    // 清空列表按钮
    handleClearAll () {
      this.checkedSpot.forEach(item => {
        item.checked = false
      })
      this.tableData.forEach(item => {
        item.disabled = false
      })
      this.checkedSpot = []
    },
    // '增加'多选框
    handleAdd (row) {
      let arrayId = []
      if (row.checked) {
        this.tableData.forEach(item => {
          if (!item.checked) {
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
        if (this.checkedSpot.length === 0) {
          this.checkedSpot.push(row)
        } else {
          this.checkedSpot.forEach(item => {
            arrayId.push(item.id)
          })
          if (arrayId.indexOf(row.id) === -1) {
            this.checkedSpot.push(row)
          }
        }
      } else {
        this.tableData.forEach(item => {
          item.disabled = false
        })
      }
    },
    // 添加巡查项
    addItems (row) {
      this.eventControl = '添加巡查项'
      this.ItemsForm.spotCode = row.spotCode
      this.dialogItemsVisible = true
      this.$nextTick(() => {
        this.$refs.itemsFormRef.resetFields()
      })
    },
    // 确定按钮
    handleItemsEvent (itemsFormRef) {
      this.$refs[itemsFormRef].validate(async valid => {
        if (valid) {
          if (this.ItemsForm.inputMode === 0) {
            this.ItemsForm.feedbackItemId = 4
          }
          let params = {
            feedbackItemId: this.ItemsForm.feedbackItemId,
            inputMode: this.ItemsForm.inputMode,
            spotCode: this.ItemsForm.spotCode,
            taskContent: this.ItemsForm.taskContent,
            planCode: this.editForm.planCode
          }
          await addPlanRelation(params)
          // if (this.oldSpotCode !== '') {
          //   if (this.codeArr.indexOf(params.spotCode) === -1) {
          //     this.itemsList = []
          //   } else {
          //     if (this.oldSpotCode !== params.spotCode) {
          //       this.spotArr.forEach(item1 => {
          //         if (item1.spotCode === params.spotCode) {
          //           this.itemsList = item1.planSpotEventRelationList
          //         }
          //       })
          //     }
          //   }
          // }
          this.spotArr.forEach(item => {
            if (item.spotCode === params.spotCode) {
              item.planSpotEventRelationList.push(params)
              // this.itemsList.push(params)
              // this.codeArr.push(params.spotCode)
              // item.planSpotEventRelationList = this.itemsList
              // this.oldSpotCode = params.spotCode
            }
          })
          this.tableSpot = this.spotArr
          this.dialogItemsVisible = false
          this.$refs.itemsFormRef.resetFields()
        }
      })
    },
    closeItems () {
      this.dialogItemsVisible = false
    },
    // 更改巡更点
    updatePosition (item) {
      this.eventControl = '更改巡更点'
      this.oldSpotCode = item.spotCode
      this.checkedSpot = []
      this.checkedSpot.push(item)
      this.getPlanSpotList()
      this.dialogAddVisible = true
    },
    // 关闭tag标签
    closeTag (key) {
      this.checkedSpot.forEach(item => {
        if (item.id === key) {
          item.checked = false
        }
      })
      this.checkedSpot.pop()
      this.tableData.forEach(item => {
        item.disabled = false
      })
    },
    // 巡更点查询按钮
    spotSubmit () {
      let sValue = {}
      if (this.spotValue.length > 12) {
        sValue = {
          spotCode: this.spotValue
        }
      } else {
        sValue = {
          spotName: this.spotValue
        }
      }
      this.getPlanSpotList(sValue)
    },
    // 更改巡更点确定按钮
    async handleEditSpotEvent () {
      let checkedCode = ''
      let checkedName = ''
      this.checkedSpot.forEach(item => {
        if (item.checked) {
          checkedCode = item.spotCode
          checkedName = item.spotName
        }
      })
      let params = {
        spotCode: checkedCode,
        spotName: checkedName,
        oldSpotCode: this.oldSpotCode
      }
      let index = this.spotArr.findIndex(e => {
        return e.spotCode === params.spotCode && e.spotCode !== this.oldSpotCode
      })
      if (index !== -1) {
        return this.$message.info('已存在相同的巡更点!')
      }
      this.spotArr.forEach(item => {
        if (params.oldSpotCode === item.spotCode) {
          item.spotName = params.spotName
          item.oldSpotCode = params.oldSpotCode
          item.spotCode = params.spotCode
        }
      })
      this.dialogAddVisible = false
    },
    closeAdd () {
      this.dialogAddVisible = false
    },
    pageHandleChange (val) {
      this.currentPage = val
      this.getPlanSpotList()
    },
    // 巡查项编辑按钮
    handleEdit (row) {
      this.eventControl = '编辑巡查项'
      this.ItemsForm.taskContent = row.taskContent
      this.ItemsForm.contentCode = row.contentCode
      this.ItemsForm.taskCode = row.taskCode
      this.ItemsForm.planCode = row.planCode
      this.ItemsForm.spotCode = row.spotCode
      this.ItemsForm.inputMode = row.inputMode
      this.ItemsForm.feedback = row.feedbackItemId
      this.ItemsForm.feedbackItemId = row.feedbackItemId
      this.dialogEditVisible = true
    },
    handleEditEvent (editFormRef) {
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let params = {
            feedbackItemId: this.ItemsForm.feedbackItemId,
            inputMode: this.ItemsForm.inputMode,
            spotCode: this.editForm.spotCode,
            contentCode: this.ItemsForm.contentCode,
            taskContent: this.ItemsForm.taskContent
          }
          this.spotArr.forEach(item => {
            let v = item.planSpotEventRelationList
            for (let i = 0; i < v.length; i++) {
              if (params.contentCode === v[i].contentCode) {
                v[i].feedbackItemId = params.feedbackItemId
                v[i].inputMode = params.inputMode
                v[i].taskContent = params.taskContent
              }
            }
          })
          this.dialogEditVisible = false
          this.$refs.ItemsFormRef.resetFields()
        }
      })
    },
    modeChange (val) {
      if (val) {
        this.ItemsForm.feedbackItemId = ''
      }
    },
    handleDelete (row) {
      this.$confirm('是否确认删除该巡查项?', '审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let resIndex = 0
        this.spotArr.forEach(item => {
          let v = item.planSpotEventRelationList
          resIndex = v.findIndex(value => {
            return value.id === row.id
          })
          if (resIndex !== -1) {
            v.splice(resIndex, 1)
          }
        })
        let idArr = []
        idArr.push(row.id)
        let res = await deletePlanRelation({
          idList: idArr
        })
        if (res.code === 0) {
          this.$message.success('删除成功')
        }
      })
    },
    closedEdit () {
      this.dialogEditVisible = false
    },
    // 选择巡检人按钮
    handleChose () {
      // this.eventControl = '选择巡检执行人'
      // this.InspectorValue = []
      // this.editForm.userId = []
      // this.editForm.checkedInspector = ''
      // this.InspectorList = ''
      // this.positionValue = ''
      // this.dialogChoseVisible = true
      this.$refs.PostUserTreeModal.add()
    },
    userTreeModalOk (val) {
      const { userName } = val
      this.editForm.taskOperatorUserName = userName
      this.checkUserInfo = val
    },
    // 设置只能选中一位巡检人
    leftChange (selecedOption) {
      this.changeFlag = !this.changeFlag
      let arr = this.editForm.userId
      arr.forEach(item => {
        if (item.key !== selecedOption[0]) {
          item.disabled = this.changeFlag
        }
      })
    },
    // 设置撤销选中，左侧选项可选
    cancelCheck (val, t) {
      this.changeFlag = false
      if (t === 'left') {
        this.editForm.userId.forEach(item => {
          item.disabled = false
        })
      }
    },
    checkedClear () {
      this.InspectorValue = []
      this.editForm.userId = []
      this.editForm.taskOperatorUserName = ''
    },
    handleCancel () {
      // this.$router.push({ name: 'patrolPlanTask' })
      this.$router.push({ path: 'PlanTask' })
    },
    enableForm (editFormRef) {
      if (!this.InspectorList) {
        this.InspectorList = this.editForm.taskOperatorUserNo
      }
      this.spotArr.forEach(item => {
        if (!item.oldSpotCode) {
          item.oldSpotCode = item.spotCode
        }
        item.planSpotEventRelationList = this.editForm.planType === 2 ? item.planSpotEventRelationList : []
      })
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let enableFlag = 0
          if (this.spotArr.length === 0) {
            enableFlag = 1
          } else {
            this.spotArr.forEach(item1 => {
              if (item1.planSpotEventRelationList.length === 0 && this.editForm.planType === 2) {
                enableFlag = 2
                // this.spotArr = []
                return enableFlag
              }
            })
          }
          let params = {
            // 'needUploadImage': +this.editForm.needUploadImage,
            isValid: this.editForm.isValid,
            planCode: this.editForm.planCode,
            planName: this.editForm.planName,
            planPeriodByFront: this.editForm.planPeriodByFront,
            planStartTime: this.editForm.planStartTime,
            // taskOperatorUserNo: this.InspectorList,
            taskOperatorRoleNo: this.checkUserInfo.userNo.split('-')[0],
            taskOperatorUserNo: this.checkUserInfo.userNo.split('-')[1],
            validEndTime: `${this.editForm.validEndTime}:59`,
            validStartTime: `${this.editForm.validStartTime}:59`,
            planSpotEventList: this.spotArr,
            taskOperatorUserName: this.editForm.taskOperatorUserName,
            planType: this.editForm.planType
          }
          if (enableFlag === 0) {
            let res = await updatePlan(params)
            if (res.code === 0) {
              this.$message.success('编辑成功！')
              // this.$router.push({ name: 'patrolPlanTask' })
              this.$router.push({ path: 'PlanTask' })
            }
          } else if (enableFlag === 1) {
            this.$message.error('巡更点不能为空，请选择巡更点')
          } else if (enableFlag === 2) {
            this.$message.error('巡查项不能为空，请添加巡查项')
          }
        }
      })
    },
    // 获取label
    getLabel (val) {
      return this.$base.constFormatter(spotTypeList, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  font-size: 16px;
  .header-card,
  .table-card,
  .form-card,
  .foot-card {
    margin-bottom: 10px;
  }
  .table-card {
    .position-tab {
      div {
        margin: 10px 0;
        h3 {
          display: inline-block;
          margin-right: 10px;
        }
        span {
          margin-right: 10px;
        }
      }
    }
  }
  .foot-card {
    .btn-group {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
  .img-over {
    margin-right: 5px;
    width: 60px;
    height: 45px;
    cursor: pointer;
  }
}

.clear-box {
  text-align: right;
  padding-bottom: 10px;
}
.task-span {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
}

/deep/ .el-dialog__body {
  padding: 20px 30px 10px 30px;
}
/deep/ .el-transfer__buttons {
  padding: 0 32px;
}
/deep/ .el-transfer__button.is-with-texts {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}
/deep/ .el-transfer-panel {
  width: 264px;
}
.task-input {
  width: 200px;
  margin-right: 10px;
}
/deep/ .el-transfer-panel__header {
  display: none;
}
.cusTitleCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cusTitle {
    box-sizing: border-box;
    width: 264px;
    background: #f5f7fa;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6ebf5;
    padding-left: 15px;
    font-size: 16px;
  }
}
</style>
